<template>
  <a-modal :title="title" :width="800" :visible="visible" :confirm-loading="confirmLoading" cancel-text="关闭" @ok="submit" @cancel="closeModal">
    <a-spin :spinning="confirmLoading">
      <a-form :form="form">
        <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="医院名称">
          <a-input v-decorator="['name', validatorRules.value ]" placeholder="请输入医院名称" />
        </a-form-item>
        <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="省市区"> 
          <a-row>
            <a-col :span="8">
              <a-select placeholder="选择省" v-decorator="['province', validatorRules.value ]" @change="funProvinceChoose">
                <a-select-option :value="item.val" v-for="(item, index) in provinceUl" :key="index">{{ item.name }}</a-select-option>
              </a-select>
            </a-col>
            <a-col :span="8">
              <a-select placeholder="选择市" v-decorator="['city', validatorRules.value ]" @change="funCityChoose">
                <a-select-option :value="item.val" v-for="(item, index) in cityUl" :key="index">{{ item.name }}</a-select-option>
              </a-select>
            </a-col>
            <a-col :span="8">
              <a-select placeholder="选择区" v-decorator="['area', validatorRules.value ]" @change="funAreaChoose">
                <a-select-option :value="item.val" v-for="(item, index) in areaUl" :key="index">{{ item.name }}</a-select-option>
              </a-select>
            </a-col>
          </a-row>
        </a-form-item>
        <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="详细地址">
          <a-input v-decorator="['address', validatorRules.value ]" placeholder="请输入详细地址" />
        </a-form-item>
        <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="医院电话">
          <a-input v-decorator="['tel', validatorRules.value ]" placeholder="请输入医院联系电话" />
        </a-form-item>
        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="医院logo" hasFeedback>
          <ImageUpload text="上传" :filePath="1" v-model="logoImg" :isMultiple="false" />
        </a-form-item>
        <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="医院简介">
          <a-textarea placeholder="请输入医院简介" :rows="2" v-decorator="['content', validatorRules.content]" />
          <!-- <Editor @printEdito="printEdito" ref="head"></Editor> -->
        </a-form-item>
      </a-form>
    </a-spin>
  </a-modal>
</template>

<script>
import { Slime } from '@/mixins/slime';
import { evaFiltersMixin } from '@/mixins/evaMixin';

import city from '@/utils/city.json';
import ApiTree from '@/api/hospital/hospitalList';
import ImageUpload from '@/components/ImageUpload';
import Editor from '@/views/components/Editor';
export default {
  name: 'hospitalListModal',
  mixins: [Slime, evaFiltersMixin],
  components: { Editor, ImageUpload },
  data() {
    return {
      title: '编辑',
      form: this.$form.createForm(this),
      model: {},
      validatorRules: {
        value: { rules: [{ required: true, message: '请输入内容!' }] },
      },
      id: 0,
      logoImg: '',

      provinceUl: [],
      cityUl: [],
      areaUl: [],

      provinceIndex: null,
      cityIndex: null,
      areaIndex: null,

      provinceChoose: null,
      cityChoose: null,
      areaChoose: null,
    };
  },
  created() {
    this.initProvince();
  },
  methods: {
    initProvince() {
      this.provinceUl = city.map((obj, i) => {
        return (obj = {
          name: obj.name,
          val: obj.name,
        });
      });
    },
    initCity() {
      this.cityUl = city[this.provinceIndex].city.map((obj,i) => {
        return (obj = {
          name: obj.name,
          val: obj.name,
        });
      });
    },
    initArea() {
      this.areaUl = city[this.provinceIndex].city[this.cityIndex].area.map((obj,i) => {
        return (obj = {
          name: obj,
          val: obj,
        });
      });
      console.log(this.areaUl);
    },
    funProvinceChoose(val,option) {
      console.log(option.data.key)
      this.provinceChoose = val;
      this.provinceIndex = option.data.key;

      this.cityChoose = null;
      this.cityIndex = null;

      this.areaChoose = null;
      this.areaIndex = null;

      this.initCity();
      this.areanUl = [];
    },
    funCityChoose(val,option) {
      this.cityChoose = val;
      this.cityIndex = option.data.key;

      this.areaChoose = null;
      this.areaIndex = null;

      this.initArea();
    },
    funAreaChoose(val,option) {
      this.areaChoose = val;
      this.areaIndex = option.data.key;
    },
    
    // 增
    crudCreate() {
      this.crudUpdate({});
    },
    // 改
    crudUpdate(record) {
      console.log(record)
      this.form.resetFields(); //重新设置领域
      this.visible = true;
      if (!record.id) {
        return false;
      }
      ApiTree.getDetail(record.id)
        .then((res) => {
          let data = res.result;
          this.id = data.id;
          this.form.setFieldsValue({
            name: data.name,
            province: data.province,
            city: data.city,
            area: data.area,
            address: data.address,
            tel: data.tel,
            content: data.content,
          });
          this.logoImg = data.img;
          // this.$refs.head.childFunction(data.content)
        })
        .finally(() => {});
    },
    // 提交
    submit() {
      const that = this;
      this.form.validateFields((err, values) => {
        if (!err) {
          that.confirmLoading = true;
          let param = values;
          if (!that.id) {
            that.submitCreate(param);
          } else {
            param = { 
              ...param, 
              id: that.id,
              img: that.logoImg,
              // content: that.content,
            };
            that.submitUpdate(param);
          }
        }
      });
    },
    // 提交 增
    submitCreate(param) {
      const that = this;
      ApiTree.getAdd(param)
        .then((res) => {
          that.$message.success('新增成功');
        })
        .finally(() => {
          that.closeModal();
        });
    },
    // 提交 改
    submitUpdate(param) {
      const that = this;
      ApiTree.getUpdate(param)
        .then((res) => {
          that.$message.success('编辑成功');
        })
        .finally(() => {
          that.closeModal();
        });
    },
    //富文本编辑器
    // printEdito(content) {
    //   this.content = content;
    // },
    // 弹窗-关闭
    closeModal() {
      this.confirmLoading = false;
      this.visible = false;
      this.id = null;
      this.form.resetFields();
      this.$emit('closeModal');
    },
  },
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
</style>